<template>
  <div>
    <div class="tags" v-if="showTags">
      <!--        <ul>-->
      <!--            <li class="tags-li" v-for="(item,index) in tagsList" :class="{'active': isActive(item.path)}" :key="index">-->
      <!--                <router-link :to="item.path" class="tags-li-title">-->
      <!--                    {{item.title}}-->
      <!--                </router-link>-->
      <!--                <span class="tags-li-icon" @click="closeTags(index)"><i class="el-icon-close"></i></span>-->
      <!--            </li>-->
      <!--        </ul>-->
      <el-tabs v-model="editableTabsValue" type="card" closable @tab-click="selectedTabHandle" @tab-remove="closeTags" class="headTital">
        <el-tab-pane
            :key="item.name"
            v-for="(item, index) in tagsList"
            :label="item.title"
            :name="item.name"
        />
      </el-tabs>
      <div class="tags-close-box">
        <el-dropdown @command="handleTags">
          <el-button size="medium" type="primary">
            标签选项<i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu size="small" slot="dropdown">
            <el-dropdown-item command="other">关闭其他</el-dropdown-item>
            <el-dropdown-item command="all">关闭所有</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
    <div v-show="contextMenuVisible">
      <ul :style="{left:left+'px',top:top+'px'}" class="contextmenu">
        <li @click="memuClick().curTabReload()"><el-button type="text" size="mini">重新加载</el-button></li>
        <li><el-button type="text" @click="memuClick().closeAllTabs()" size="mini">关闭所有</el-button></li>
<!--        <li v-if="isDisabledCloseLeftBtnFlag"><el-button type="text" @click="memuClick().left()" size="mini">关闭左边</el-button></li>-->
<!--        <li v-if="isDisabledCloseRightBtnFlag"><el-button type="text" @click="memuClick().right()" size="mini">关闭右边</el-button></li>-->
        <li><el-button type="text" @click="memuClick().other()" size="mini">关闭其他</el-button></li>
      </ul>
    </div>
  </div>
</template>

<script>
import bus from './bus';
export default {
  data() {
    return {
      left: 0,
      top: 0,
      contextMenuVisible: false,
      tagsList: [],
      curClickObj: {},
      editableTabsValue: '',
      isDisabledCloseLeftBtnFlag: false,
      isDisabledCloseRightBtnFlag: false
    }
  },
  methods: {
    memuClick () {
      const that = this
      that.closeContextMenu()
      // 当前tabs
      const curTabReload = () => {
        that.$emit('refresh', this.curClickObj)
      }
      // 关闭所有
      const closeAllTabs = () => {
        this.closeAll()
      }
      // 关闭左边
      const left = () => {
        let a = this.tagsList.indexOf(this.curClickObj)
        // let len = this.tagsList.length
        this.tagsList.splice(0, a)
      }
      const right = () => {
        let a = this.tagsList.indexOf(this.curClickObj)
        this.tagsList.splice(a + 1)
      }
      const other = () => {
        this.tagsList = this.tagsList.filter(item => {
          return item.path === this.curClickObj.path;
        })
      }
      return {
        curTabReload,
        closeAllTabs,
        left,
        right,
        other
      }
    },
    closeContextMenu () {
      this.contextMenuVisible = false
    },
    // 事件
    openContextMenu(obj, e) {
      e.preventDefault() //防止默认菜单弹出
      this.left = e.clientX
      this.top = 30
      this.curClickObj = obj
      let a = this.tagsList.indexOf(obj)
      let len = this.tagsList.length
      this.isDisabledCloseRightBtnFlag = a >= (len - 2);
      this.isDisabledCloseLeftBtnFlag = a > 0;
      this.$nextTick(_ => {
        this.contextMenuVisible = true
      })
    },
    // tabs, 选中tab
    selectedTabHandle (tab) {
      tab = this.tagsList.filter(item => item.name === tab.name)
      if (tab.length >= 1) {
        this.$router.push(tab[0].path)
      }
    },
    isActive(path) {
      return path === this.$route.fullPath;
    },
    // 关闭单个标签
    closeTags(tabName) {
      this.tagsList = this.tagsList.filter(item => item.name !== tabName)
      if (this.tagsList.length >= 1) {
        // 当前选中tab被删除
        if (tabName === this.editableTabsValue) {
          const tab = this.tagsList[this.tagsList.length - 1]
          this.$router.push(tab.path, () => {
            this.editableTabsValue = this.$route.name
          })
        }
      } else {
        this.editableTabsValue = ''
        this.$router.push('/')
      }
    },
    // 关闭全部标签
    closeAll(){
      this.tagsList = [];
      this.$router.push('/');
    },
    // 关闭其他标签
    closeOther(){
      const curItem = this.tagsList.filter(item => {
        return item.path === this.$route.fullPath;
      })
      this.tagsList = curItem;
    },
    // 设置标签
    setTags(route){
      const isExist = this.tagsList.some(item => {
        return item.path === route.fullPath;
      })
      if(!isExist){
        if(this.tagsList.length >= 8){
          this.tagsList.shift();
        }
        // 标签是否已存在
        const tab = this.tagsList.filter(item => {
          return item.name === route.name
        })
        if (tab.length === 0) {
          this.tagsList.push({
            title: route.meta.title,
            path: route.fullPath,
            name: route.name
          })
        } else {
          let a = this.tagsList[this.tagsList.indexOf(tab[0])]
          if (a.path !== route.fullPath) {
            a.path = route.fullPath
          }
        }
      }
      bus.$emit('tags', this.tagsList);
      this.editableTabsValue = route.name
    },
    handleTags(command){
      command === 'other' ? this.closeOther() : this.closeAll();
    }
  },
  computed: {
    showTags() {
      return this.tagsList.length > 0;
    }
  },
  watch:{
    contextMenuVisible (value) {
      if (value) {
        document.body.addEventListener('click', this.closeContextMenu)
      } else {
        document.body.removeEventListener('click', this.closeContextMenu)
      }
    },
    tagsList: {
      deep: true,
      handler (n, o) {
        this.$nextTick(_ => {
          this.$nextTick(_ => {
            let tab_top_dom = this.$el.getElementsByClassName("el-tabs__item")
            for (let i = 0; i < tab_top_dom.length; i++) {
              let that = this
              let curClickObj = n[i]
              tab_top_dom[i].oncontextmenu = function (e) {
                that.openContextMenu(curClickObj, e)
              }
            }
          })
        })
      }
    },
    $route(newValue, oldValue){
      this.setTags(newValue);
    }
  },
  created(){
    this.setTags(this.$route);
    // 监听关闭当前页面的标签页
    bus.$on('close_current_tags', () => {
      for (let i = 0, len = this.tagsList.length; i < len; i++) {
        const item = this.tagsList[i];
        if(item.path === this.$route.fullPath){
          if(i < len - 1){
            this.$router.push(this.tagsList[i+1].path);
          }else if(i > 0){
            this.$router.push(this.tagsList[i-1].path);
          }else{
            this.$router.push('/');
          }
          this.tagsList.splice(i, 1);
          break;
        }
      }
    })
  }
}

</script>


<style scoped lang="scss">
.tags {
  position: relative;
  height: 40px;
  overflow: hidden;
  background: #fff;
  padding-right: 120px;
  box-shadow: 0 5px 10px #ddd;

  /deep/ .el-tabs--card>.el-tabs__header .el-tabs__item.is-active.is-closable {
    //border-bottom: 2px #3fD4D4 solid;
  }
  /deep/ .el-tabs__item.is-active {
    color: #3fD4D4 !important;
  }
}

.tags ul {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}

.tags-li {
  float: left;
  margin: 3px 5px 2px 3px;
  border-radius: 3px;
  font-size: 12px;
  overflow: hidden;
  cursor: pointer;
  height: 23px;
  line-height: 23px;
  border: 1px solid #e9eaec;
  background: #fff;
  padding: 0 5px 0 12px;
  vertical-align: middle;
  color: #666;
  -webkit-transition: all .3s ease-in;
  -moz-transition: all .3s ease-in;
  transition: all .3s ease-in;
}

.tags-li:not(.active):hover {
  background: #f8f8f8;
}

.tags-li.active {
  color: #fff;
}

.tags-li-title {
  float: left;
  max-width: 80px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-right: 5px;
  color: #666;
}

.tags-li.active .tags-li-title {
  color: #fff;
}

.tags-close-box {
  position: absolute;
  right: 0;
  bottom: 0;
  box-sizing: border-box;
  padding-top: 1px;
  text-align: center;
  width: 110px;
  height: 40px;
  background: #fff;
  box-shadow: -3px 0 15px 3px rgba(0, 0, 0, .1);
  z-index: 10;
}
.contextmenu {
  width: 100px;
  margin: 0;
  border: 1px solid #ccc;
  background: #fff;
  z-index: 3000;
  position: absolute;
  list-style-type: none;
  padding: 5px 0;
  border-radius: 4px;
  font-size: 14px;
  color: #333;
  box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.2);
}
.contextmenu li {
  margin: 0;
  padding: 0px 22px;

}
.contextmenu li:hover {
  background: #f2f2f2;
  cursor: pointer;
}
.contextmenu li button{
  color: #2c3e50;
}
</style>
